<template>
  <div>
    <el-button  type="text" @click="dialogFormVisible = true;operateType='save'">添加用户</el-button>

    <el-dialog :visible.sync="dialogFormVisible" title="用户信息" @close="handleClose">
      <el-form :model="user">
        <el-form-item :label-width="formLabelWidth" label="用户编号">
          <el-input v-model="user.user_id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户账号">
          <el-input v-model="user.user_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户密码">
          <el-input v-model="user.user_pwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户类型">
          <el-input v-model="user.user_type" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </el-dialog>

    <el-table :data="users" style="width: 100%">
      <el-table-column label="用户编号" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.user_id }}</td>
        </template>
      </el-table-column>
      <el-table-column label="账号" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.user_name }}</td>
        </template>
      </el-table-column>
      <el-table-column label="密码" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.user_pwd }}</td>
        </template>
      </el-table-column>
      <el-table-column label="用户类型" min-width="100">
        <template slot-scope="scope">
          <td>{{ scope.row.user_type }}</td>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        :current-page="current"
        :page-size="pageSize"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="loadUsers">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "UserView",
  data() {
    return {
      //存储用户列表的数组
      users: [],
      //控制对话框显示，默认为隐藏
      dialogFormVisible: false,
      //控制对话框关闭
      dialogTableVisible: false,
      //表单标签的宽度
      formLabelWidth: '120px',
      // 存储用户信息的对象，包括用户ID，用户名，用户密码，用户类型
      user: {user_id: '', user_name: '', user_pwd: '', user_type: ''},
      // 操作类型，用于区分保存或更新操作
      operateType: '',
      // 分页信息，总记录行数
      total: 0,
      // 当前页码
      pageSize: 5,
      // 每页显示的记录数
      current: 1,
    }
  },
  methods: {
    // 加载用户列表
    loadUsers(current) {
      // 将传入的当前页码赋值给current
      this.current = current
      //调用后台的方法，参数是url
      this.$http.get('users?m=page&current=' + this.current + '&pageSize=' + this.pageSize)
          .then(resp => {
        //数据绑定
        if (resp.data.data) {
          console.log("用户管理数据绑定",resp.data.data)
          this.users = resp.data.data.records
          this.total = resp.data.data.total
        }
      })
    },
    // 编辑用户
    handleEdit(index, row) {
      // 打印索引和用户信息以便调试
      console.log(index, row);
      // 设置操作类型为更新
      this.operateType = 'update';
      // 显示对话框，绑定数据
      this.dialogFormVisible = true;
      // 进行深克隆，以避免直接修改原始数据
      this.user = JSON.parse(JSON.stringify(row));
      // 清空密码,因为编辑时不需要修改密码
      this.user.user_pwd = '';
    },
    // 删除用户，列表索引，被选中删除的用户信息
    handleDelete(index, row) {
      // 打印索引和用户信息以便调试
      console.log(index, row);
      // 使用confirm对话框提示用户是否确定删除
      this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送删除请求
        this.$http.post('users?m=delete&user_id=' + row.user_id).then(resp => {
          // 处理后台返回的结果
          if (resp.data.data == true) {
            // 重新加载用户列表
            this.loadUsers(this.current);
            // 显示成功消息
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 保存用户信息
    handleSave() {
      // 根据操作类型来判断是添加还是更新数据
      if (this.operateType == 'save') {
        // 添加用户，发送保存请求
        this.$http.post('users?m=save', this.$qs.stringify(this.user))
            .then(resp => {
              // 打印请求结果，便于调试
              console.log('save success', resp.data)
              // 判断是否保存成功
              if (resp.data.data == true) {
                // 打印保存成功信息，便于调试
                console.log('save successfully')
                // 重新加载用户列表
                this.loadUsers(this.current);
              }
            })
      } else {
        //更新用户，发送更新请求
        this.$http.post('/users?m=update', this.$qs.stringify(this.user))
            .then(resp => {
              // 打印请求结果，便于调试
              console.log('update success', resp.data)
              // 判断是否更新成功
              if (resp.data.data == true) {
                // 打印更新成功信息，便于调试
                console.log('update successfully')
                // 重新加载用户列表
                this.loadUsers(this.current);
              }
            })
      }
      // 关闭对话框
      this.dialogFormVisible = false;
    },
    // 清除对话框数据
    handleClose() {
      // 重置用户信息对象和操作类型
      this.user = {user_id: '', user_name: '', user_pwd: '', user_type: ''},
      // 清空操作类型
      this.operateType = ''
    }
  },
  //页面挂载钩子
  mounted() {
    this.loadUsers(this.current)
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>